import React, { Component } from 'react';

/*
  学习目标：Props的两大特点
  1. Props可以传任意数据类型
      string  number  boolean null undefined  array obj
  🔔 functon JSX
  2. Props是只读的

*/

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 💥 可以先使用，不必定义 */}
        {/* string 数字 boolean */}
        {/* <Child name="zs" msg="狂徒" age={12} isShow={true} title={undefined}></Child> */}
        {/* <Child  person={{ name: 'zs', age: 18 }} list={[1, 2, 3]}></Child> */}
        <Child list={[1, 2, 3]}></Child>
      </div>
    );
  }
}

function Child({ list }) {
  return (
    <div>
      {list.map((item) => {
        return <div key={item}>item</div>;
      })}

      <button
        onClick={() => {
          list.push(4);
        }}
      >
        点我修改list
      </button>
    </div>
  );
}
